<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            vertical-align:middle;
        }
    </style>
    <script src="../框架相关的js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div style="display: flex; width: 200px; justify-content: space-between; align-items: center;">
          <div v-for="item in arr" @click="changetag(item)" style="display: flex;">
               <div v-if="item.tag">
                   <img style="width:20px;height:20px" src="../img/active.png" alt="">
               </div>
               <div v-else>
                <img style="width:20px;height:20px"  src="../img/default.png" alt="">
               </div>
               <div style="margin-left: 10px;">
                {{item.name}}
              </div>
          </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                arr: [{ name: '是', tag: true, value: 1 },{ name: '一般', tag: false, value: 2 },{ name: '否', tag: false, value: 0 }],
                statusvalue:''
            },
            methods: {
                changetag(item){
                       this.arr.forEach(item => {
                           item.tag=false
                       });
                       item.tag=true
                       this.statusvalue=item.value
                       console.log(this.statusvalue,'选择的值');
                }
            },
        })
    </script>
</body>

</html>